<template>
    <div class="service_container">
        <HeaderTop :goBack="true" :headTitle="'服务中心'"></HeaderTop>
        <section class="service_connect">
            <a href="https://ecs-im.ele.me/" class="service_left">
                <svg>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#human"></use>
                </svg>
                <span>在线客服</span>
            </a>
            <a href="tel:10105757" class="service_right">
                <svg>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#phone"></use>
                </svg>
                <span>在线客服</span>
            </a>
        </section>
        <section class="hot_questions" v-if="serviceData">
            <h4 class="qustion_header">热门问题</h4>
            <ul>
                <li v-for="(item, index) in questionTitle" :key="index" class="question_title" @click="toQuestionDetail(item, index)">
                    <span>{{item}}</span>
                     <svg class="arrow-svg" fill="#999">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                    </svg>
                </li>
            </ul>
        </section>
        <transition name="router-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import {getService} from '@api/getData';
import {mapActions} from 'vuex'
export default {
    data(){
        return {
            serviceData:null,
            questionTitle:[],
            questionContent:[],
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        ...mapActions(['saveQuestionContent']),
        async initData(){
            this.serviceData = await getService();
            Object.keys(this.serviceData).forEach((item)=>{
                if(item.indexOf('Content') !== -1){ // content
                    this.questionContent.push(this.serviceData[item]);
                }else if(item.indexOf('Caption') !== -1){//title
                    this.questionTitle.push(this.serviceData[item]);
                }
            })
        },
        toQuestionDetail(item,index){

            this.saveQuestionContent({
                title:item,
                content:this.questionContent[index]
            })
            this.$router.push('/service/question')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.service_container{
    position: relative;
    background-color: #fff;
    padding-top: 1.95rem;
    .service_connect{
        display: flex;
        a{
            flex: 1;
            height: 4rem;
            @include fj(center);
            flex-direction: column;
            align-items: center;
            svg{
                @include wh(1rem,1rem);
            }
            span{
                @include sc(0.6rem,#666);
                margin-top: 0.5rem;
            }
            border-bottom: 0.012rem solid #f2f2f2;
        }
        .service_left{
            border-right: 0.012rem solid #f2f2f2;
        }
    }
    .hot_questions{
        padding: 0 0.5rem;
        .qustion_header{
            height: 2.5rem;
            line-height: 2.5rem;
            @include sc(0.7rem,#666);
            border-bottom: 0.012rem solid #f2f2f2;
        }
        .question_title{
            @include sc(0.6rem,#666);
            @include fj;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 0.012rem solid #f2f2f2;
            .arrow-svg{
                @include wh(0.6rem,0.6rem);
                fill: #999;
            }
        }
    }
}
.router-slide-enter,.router-slide-leave-to{
    transform: translateX(100%);
    opacity: 0;
}
.router-slide-enter-active,.router-slide-leave-active{
    transition: all 0.3s ease-in-out;
}   
</style>